<script setup>
  import 'animate.css'
  import {ref} from "vue"
  const action = ref('on');
</script>

<template>
  <!-- 多个元素同时只出现一个方法：1.使用定位，脱离文档流 2.使用模式mode（in-out先进后出，out-in先出后进） -->
  <transition
    enter-active-class="animate__animated animate__fadeIn xia"
    leave-active-class="animate__animated animate__fadeOut xia"
    mode="out-in">
    <button class="on" v-if="action == 'on'" @click="action = 'off'">开启</button>
    <button class="off" v-else @click="action = 'on'">关闭</button>
  </transition>
</template>

<style lang="scss" scoped>
  button {
    border: none;
    padding:10px 20px;
    border-radius:4px;
    color: #fff;
    cursor: pointer;
    &.on{
      background-color:#2ecc71;
    }
    &.off{
      background-color:#e67e22;
    }
  }

  .xia{
    animation-duration: 5s !important;
  }
</style>
